/**
 * A recreation of this demo: https://nivo.rocks/pie/
 */
import { useEffect } from "react";
import { Chart } from "@antv/g2";

const Articles = () => {
  useEffect(() => {
    const chart = new Chart({
      container: "box",
      width: 500,
      height: 400,
      paddingLeft: 50,
    });

    // 转换成极坐标
    chart.coordinate({ type: "theta", innerRadius: 0.25, outerRadius: 0.8 });

    chart
      .interval()
      .data([
        { id: "c", value: 526 },
        { id: "sass", value: 220 },
        { id: "php", value: 325 },
        { id: "elixir", value: 561 },
        { id: "rust", value: 54 },
      ])
      .transform({ type: "stackY" })
      .encode("y", "value") // 数据轴使用哪个字段作为数据
      // .encode("color", "id")
      .scale("color", {
        range: ["#e8c1a0", "#f47560", "#f1e15b", "#e8a838", "#61cdbb"],
      })
      .label({
        text: "value",
        fontWeight: "bold",
        offset: 14,
      })
      .label({
        text: "id",
        position: "spider",
        fontWeight: "bold",
        textBaseline: "bottom",
        textAlign: (d: any) => (["c", "sass"].includes(d.id) ? "end" : "start"),
        dy: -4,
        connectorDistance: 0,
      })
      .style("radius", 10)
      .style("stroke", "#ff0000")
      .style("lineWidth", 2)
      .animate("enterType", "waveIn")
      .legend(true);

    chart.render();
  }, []);

  return (
    <div>
      <h1>文章</h1>

      <div id="box"></div>
    </div>
  );
};

export default Articles;
